<template>
    <div style="width: 100%;height: 100%;">
        <div style="float: right;height: 100%;position: relative;display: flex;align-items: center;">
            <el-button style="" type="success" @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
//  按需引入 screenfull
import screenfull from 'screenfull'
import { ref, onMounted, onUnmounted } from 'vue'

const isFullscreen = ref(false)

onMounted(() => {
    window.addEventListener('resize', currentScreen)
})

onUnmounted(() => {
    window.removeEventListener('resize', currentScreen)
})

// 浏览器改变触发
const currentScreen = () => {
    if (screenfull.isFullscreen !== isFullscreen.value) isFullscreen.value = screenfull.isFullscreen
}
//  点击切换全屏
const screenfullClick = () => {
    if (screenfull.isEnabled) screenfull.toggle()
}
</script>
<style scoped>
.top-right {
    float: right;
    height: 100%;
    position: relative;
}

</style>